<script setup>
import custromHeader from '@/components/custromHeader.vue'
import custromFooter from '@/components/footer.vue'
import XgPlayer from '@/components/custromPlayer.vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from '@/stores/home'
import { reactive, ref,nextTick} from 'vue'
import {requestPlayerList} from '@/api/play'
import { Message } from '@arco-design/web-vue'
const homeStore = useStore()
homeStore.updateMenuList()
const route = useRoute()
const router = useRouter()
const { tIndx,idx } = route.query



// console.log('ho', homeStore.menuList);
let menuList = ref([])
let poster = ref('')


let playPath = ref('')

// 播放列表
let playList = reactive([])

let playMovieInfo = reactive({
    title:'',
    start:'',
    type:'',
    introduce:''
})

// 当前页面显示的相关推荐
let recommendList = reactive([])

// 线路播放
let linePlay = reactive({
    linPlayList:[]
})

// 可以播放列表的索引
let tabIndex = ref(0)

let tabClickHandler = (idx) => {
    // console.log('index',idx);
    tabIndex.value = idx
}



async function getPlayList(){
    let playPathQuery = window.atob(route.query.playPath)
    let {title,start,type,introduce} = route.query
    let obj = {title,start,type,introduce}
    Object.keys(playMovieInfo).forEach(item => playMovieInfo[item] = obj[item])
    let arr = playPathQuery.split('?')
    let {data:res} = await requestPlayerList(arr[0],arr[1].split('=')[1])
    console.log('获取结果',res);
    if (res.code == 200) {
        res.data.guessLike.list.forEach(item => recommendList.push(item)) // 猜您喜欢
        playList = res.data.result.playPath
        linePlay.linPlayList = res.data.result.done
        console.log('可用播放列表',playList);
        let canPlayStatus = playList[idx] == undefined ? false : playList[0].includes('.m3u8')
        if (!canPlayStatus) {
            Message.clear()
            Message.error('当前线路不可播放 请更换')
            return
        }
        playPath.value = playList[idx]
        
        tabIndex.value = tIndx*1
    }else {
        Message.error('获取资源失败')
    }
}
getPlayList()

// 猜喜欢点击处理函数
let guessItemClickHandler = (item) => {
    router.push({path:'/detail',query:{path:item.item_path}})
}

// 切换播放线路
let changeLine = (item) => {
    console.log('当前播放地址',item);
    playPath.value = item
}

</script>

<template>
    <div class="play-view">
        <custromHeader :menu-list="homeStore.menuList"></custromHeader>
        <div class="play-view-container">
            <div class="player-content">
                <div class="play-left">
                    <XgPlayer :url="playPath"></XgPlayer>
                </div>
                <div class="play-right">
                    <div class="container">
                        <h3>相关推荐:</h3>
                        <ul class="nav-list" v-if="recommendList">
                            <li class="recommend-item" v-for="(item, index) in recommendList" :key="index" @click="guessItemClickHandler(item)">
                                <div class="left-cover">
                                    <img class="recommend-cover" v-lazy="item.item_cover" alt="">
                                </div>
                                <div class="right-info">
                                    <p class="right-top-title"> {{ item.item_title }}</p>
                                    <p class="right-bottom-desc">演员:{{ item.item_actor || '暂未获取到' }}</p>
                                </div>
                            </li>
                        </ul>
                        <a-empty v-else />
                    </div>
                </div>
            </div>
            <div class="story-container">
                <div class="story-content">
                    <h2 class="play-title">{{playMovieInfo.title}}</h2>
                    <h4 class="play-start">{{playMovieInfo.start}}</h4>
                    <p class="play-type">影片类型:{{playMovieInfo.type}}</p>
                    <p class="play-introduce">剧情介绍:{{playMovieInfo.introduce}}</p>
                </div>
            </div>
            <!-- 剧集播放 -->
            <div class="play-list-container">
                <div class="play-list-content">
                    <h3>播放线路</h3>
                    <ul class="play-list-ul" v-if="playPath">
                        <!-- <li :class="[item == playPath ? 'play-list-ul-item-active':'']" class="play-list-ul-item" v-for="(item,index) in playList" :key="index" @click="changeLine(item)">
                            线路{{ index + 1 }}
                        </li> -->
                        <a-tabs :active-key="tabIndex" @tab-click="tabClickHandler" animation="false">
                            <a-tab-pane  :title="item.title" v-for="(item,index) in linePlay.linPlayList" :key="index">
                                <li :class="[im == playPath ? 'play-list-ul-item-active':'']" class="play-list-ul-item" v-for="(im,ix) in item.playList" :alt="im" :key="im"  @click="changeLine(im)">第{{ix+1}}集</li>
                                <li class="pv" v-for="(i) in 13" :key="i"></li>
                            </a-tab-pane>
                        </a-tabs>
                    </ul>
                    <a-empty  v-else />
                </div>
            </div>
        </div>
        <custromFooter></custromFooter>
    </div>
</template>


<style lang="less" scoped>
.play-view-container {
    width: 100%;

    .player-content {
        display: flex;
        align-items: center;
        width: 1300px;
        max-width: 100%;
        height: 500px;
        margin: 0 auto;

        .play-left {
            display: flex;
            align-items: center;
            width: 65%;
            height: 100%;
        }

        .play-right {
            width: 35%;
            height: 100%;
            box-sizing: border-box;
            padding: 20px;
            padding-top: 0px;
            padding-bottom: 0px;

            .container {
                width: 100%;
                height: 100%;
                border-radius: 5px;
                background-color: rgb(255, 255, 255);

                h3 {
                    margin: 0px;
                    padding: 20px;
                    height: 22px;
                }

                .nav-list {
                    box-sizing: border-box;
                    height: calc(500px - 82px);
                    overflow-y: scroll;
                    padding: 0px 20px;
                    background-color: rgba(255, 255, 255, 0.778);


                    li {
                        display: flex;
                        box-sizing: border-box;
                        padding: 10px 5px;
                        height: 94.5px;
                        // height: 100px;
                        width: 100%;
                        border-radius: 5px;
                        transition: .3s all;
                        margin-bottom: 10px;
                        // 358px
                        // background-color: rgba(238, 238, 238, 0.778);

                        &:last-child {
                            margin-bottom: 0px;
                        }
                        &:hover {
                            background-color: rgba(217, 214, 214, 0.555);
                        }

                        // &:hover img {
                        //     transform: scale(1.1);
                        // }


                        .left-cover {
                            width: 108px;
                            height: 100%;
                            overflow: hidden;

                            img {
                                transition: .3s all;
                                border-radius: 5px;
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }

                        .right-info {
                            width: calc(100% - 108px);
                            height: 100%;
                            cursor: pointer;
                            p {
                                margin: 0px;
                                text-overflow: ellipsis;
                            }
                            &:hover .right-top-title {
                                color: rgb(10, 10, 10);
                        }

                            .right-top-title {
                                box-sizing: border-box;
                                padding: 5px;
                                width: 100%;
                                height: 30px;
                                font-size: 16px;
                                line-height: 16px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                color: #111111;
                                transition: .3s all;
                                word-break: break-all;
                            }

                            .right-bottom-desc {
                                // text-indent: 28px;
                                width: 100%;
                                height: calc(100% - 30px);
                                box-sizing: border-box;
                                padding: 12px 5px;
                                overflow: hidden;
                                word-break: break-all;
                                overflow: hidden;
                                display: -webkit-box;
                                -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical;
                            }
                        }
                    }
                }
            }
        }
    }

    .story-container {
        width: 100%;
        .story-content {
            width: 1300px;
            max-width: 100%;
            padding: 20px 0px;
            margin: 0 auto;
            .play-title {
                margin-bottom: 20px;
            }
            .play-introduce {
                line-height: 22px;
                color: #1c1c1c;
            }
        }
    }
    .play-list-container {
        width: 100%;
        .play-list-content {
            width: 1300px;
            max-width: 100%;
            margin: 0 auto;
            padding: 20px 0px;
            h3 {
                font-size: 16px;
                font-weight: bold;
            }
            .play-list-ul {
                margin: 20px 0px;
                display: flex;
                flex-wrap: wrap;
                .play-list-ul-item {
                    margin-right: 12px;
                    margin-bottom: 12px;
                    padding: 10px 24px;
                    background: #f4f3f3;
                    // border-radius: 12px;
                    transition: .3s all;
                    color: #000;
                    cursor: pointer;
                    &:hover {
                        color: #fff;
                        background: #884dff;
                        box-shadow: 0px 0px 12px 1px #884dff;
                    }
                }
                .play-list-ul-item-active {
                    color: #fff;
                    background: #884dff;
                    // box-shadow: 0px 0px 1px 10px #884dff;
                    box-shadow: 0px 0px 12px 1px #884dff;
                }
            }
            .pv {
                display: block;
                margin-right: 12px;
                    margin-bottom: 12px;
                    margin: 10px 24px;
            }
        }
    }
}


// 剧集列表
/deep/ .arco-tabs-pane {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .play-list-juji-item {
        padding: 10px 15px;
        // color: #fff;
        // background: #884dff;
    }
    /deep/.arco-tabs-nav-ink {
        background: #884dff !important;
    }
    /deep/.arco-tabs-tab-active,/deep/ .arco-tabs-tab-active:hover {
        color: #884dff !important;
    }
}

@media screen and (max-width:480px){ 
    /deep/.player-content {
        flex-direction: column !important;
        height: auto !important;
        align-items: normal !important;
    }
    .play-left {
        width: 100% !important;
    }
    .play-right {
        display: none;
        width: 100% !important;
    }
    .nav-list::-webkit-scrollbar {
        display: none;
    }
    .play-start {
                    width: 100%;
                    font-size: 14px;
                    color: #000000;
                    margin-bottom: 6px !important;
                    height: 14px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
 }

</style>